<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <title>登录</title>
    <link rel="stylesheet" href="css/main.css">
    <script>
        window.onload = function() {
            <% if (session.getAttribute("message") != null) { %>
            alert("<%= session.getAttribute("message") %>");
            <% session.removeAttribute("message"); %>
            <% } %>
        };
    </script>
    <style>

        .error {
            color: red;
            font-size: 12px;
        }
        .hidden {
            display: none;
        }
    </style>
</head>

<body style="background-image: url('images/江景.png'); background-repeat: no-repeat; background-size: cover; background-position: center;">

<div class="container right-panel-active" style="background-image: url('images/祁同伟.png'); background-repeat: no-repeat; background-size: cover; background-position: center; " >



    <!-- Sign In -->
    <div class="container__form container--signin">
        <form action="studentlogin" class="form" id="form2" method="post">
            <h2 class="form__title">登录</h2>
            <input type="text" name="username" id="signinUsername" placeholder="请输入用户名" class="input" />
            <div id="signinUsernameError" class="error hidden">请输入长度为20的字符</div>
            <input type="password" name="password" id="signinPassword" placeholder="请输入密码" class="input" />
            <div id="signinPasswordError" class="error hidden">请输入长度为20的字符</div>
           <div style="left: 55px; position: absolute; margin-top:55px;font-size: 10px;color: #fff;font-style: italic;"><a href="l2.jsp" > 管理员登录</a></div>
            <a href="#" class="link">忘记密码?</a>

            <button type="button" class="btn" id="loginBtn">登录</button>
        </form>
    </div>

    <!-- Sign Up -->
    <div class="container__form container--signup" >
        <form action="register" class="form" id="form1">
            <h2 class="form__title">用户注册</h2>
            <input type="text" name="username" id="signupUsername" placeholder="用户名" class="input" />
            <div id="signupUsernameError" class="error hidden">请输入长度为20的字符</div>
            <input type="password" name="password" id="signupPassword" placeholder="密码" class="input" />
            <div id="signupPasswordError" class="error hidden">请输入长度为20的字符</div>
            <input type="text" name="name" id="signupName" placeholder="名字" class="input" />
            <div id="signupNameError" class="error hidden">请输入长度为5的字符</div>
            <button type="button" class="btn" id="registerBtn">注册</button>
        </form>
    </div>

    <!-- Overlay -->
    <div class="container__overlay">
        <div class="overlay">

            <div class="overlay__panel overlay--right">
                <button class="btn" id="signUp">注册</button>
            </div>
            <div class="overlay__panel overlay--left">
                <button class="btn" id="signIn">登录</button>
            </div>
        </div>
    </div>

</div>

<script>
    const signInBtn = document.getElementById("signIn");
    const signUpBtn = document.getElementById("signUp");
    const registerBtn = document.getElementById("registerBtn");
    const loginBtn = document.getElementById("loginBtn");
    const container = document.querySelector(".container");

    const signupUsername = document.getElementById("signupUsername");
    const signupPassword = document.getElementById("signupPassword");
    const signupName = document.getElementById("signupName");
    const signupUsernameError = document.getElementById("signupUsernameError");
    const signupPasswordError = document.getElementById("signupPasswordError");
    const signupNameError = document.getElementById("signupNameError");

    const signinUsername = document.getElementById("signinUsername");
    const signinPassword = document.getElementById("signinPassword");
    const signinUsernameError = document.getElementById("signinUsernameError");
    const signinPasswordError = document.getElementById("signinPasswordError");

    signInBtn.addEventListener("click", () => {
        container.classList.remove("right-panel-active");
    });

    signUpBtn.addEventListener("click", () => {
        container.classList.add("right-panel-active");
    });

    function validateInput(input, errorElement, maxLength) {
        input.addEventListener("blur", () => {
            if (input.value.length === 0) {
                errorElement.textContent = `请输入长度不超过20的字符`;
                errorElement.classList.remove("hidden");
            } else if (input.value.length > maxLength) {
                errorElement.textContent = `字符过长`;
                errorElement.classList.remove("hidden");
            } else {
                errorElement.classList.add("hidden");
            }
        });
    }

    validateInput(signupUsername, signupUsernameError, 20);
    validateInput(signupPassword, signupPasswordError, 20);
    validateInput(signupName, signupNameError, 5);

    validateInput(signinUsername, signinUsernameError, 20);
    validateInput(signinPassword, signinPasswordError, 20);

    function checkFormValidity(form, errors) {
        return !Array.from(errors).some(error => !error.classList.contains("hidden"));
    }

    registerBtn.addEventListener("click", (event) => {

        if (checkFormValidity(form1, [signupUsernameError, signupPasswordError, signupNameError])) {
            <%--alert("<%= (String) session.getAttribute("register_message") %>");--%>
            form1.submit();
        }
    });

    loginBtn.addEventListener("click", (event) => {
        if (checkFormValidity(form2, [signinUsernameError, signinPasswordError])) {
            form2.submit();
        }
    });
    document.addEventListener("keypress", function(event) {
        if (event.keyCode === 13) {
            loginBtn.click();
        }
    });
</script>

</body>
</html>